<template>
  <div id="log">
    <a-layout-header>
      <a-form layout="inline" :form="form">
        <a-form-item>
          <a-input placeholder="用户名" v-model="pagination.userName" @keyup.enter="getList('status')"></a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="操作方法" v-model="pagination.method" @keyup.enter="getList('status')"></a-input>
        </a-form-item>
        <a-form-item>
          <a-range-picker
            @change="getTimeChange"
            :showTime="{
              hideDisabledOptions: true,
              defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
            }"
            v-decorator="[
              'dateTime'
            ]"
            :format="format"
            class="min-label"
          />
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            icon="search"
            @click="getList('status')"
          >搜索</a-button>
        </a-form-item>
        <a-form-item>
          <a-button icon="sync" @click="initPage">重置</a-button>
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-layout-content>
      <a-table
        :columns="columns"
        :dataSource="dataTable"
        :rowKey="record => record.id"
        :loading="loading"
        :pagination="false"
        bordered>
        <template slot="time" slot-scope="text">
          <a-tag color="#999">{{text}}ms</a-tag>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-tag color="#f50" @click="deleteLog(record)">删除</a-tag>
        </template>
        <template slot="method" slot-scope="text, record">
          <a-popover placement="topLeft">
            <template slot="content">
              <p>{{ record.method }}</p>
            </template>
            <p class="ellipsi">{{ record.method }}</p>
          </a-popover>
        </template>
      </a-table>
    </a-layout-content>
    <a-layout-footer>
      <a-pagination
        :pageSizeOptions="pageSizeOptions"
        :total="totalPage"
        :current="pagination.pageNumber"
        showSizeChanger
        showQuickJumper
        @change="paginationChange"
        @showSizeChange="onShowSizeChange"
      ></a-pagination>
    </a-layout-footer>
  </div>
</template>

<script>
import * as API from "../../api/log";
import moment from "moment";

export default {
  name: "Log",
  data() {
    return {
      form: this.$form.createForm(this),
      pageSizeOptions: ["10", "20", "50"],
      totalPage: undefined,
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        username: "",
        logType: "INFO",
        method: null,
        createTime: null
      },
      format: "YYYY-MM-DD HH:mm:ss",
      visible: false,
      confirmLoading: false,
      loading: false,
      columns: [
        {
          title: "用户名",
          dataIndex: "username",
          // width: "30%",
          align: "center",
          scopedSlots: { customRender: "username" }
        },
        {
          title: "操作方法",
          dataIndex: "method",
          width: "14%",
          align: "center",
          scopedSlots: { customRender: "method" }
        },
        {
          title: "操作描述",
          dataIndex: "description",
          // width: "20%",
          align: "center",
          scopedSlots: { customRender: "description" }
        },
        {
          title: "请求IP",
          dataIndex: "requestIp",
          // width: "20%",
          align: "center",
          scopedSlots: { customRender: "requestIp" }
        },
        {
          title: "访问类型",
          dataIndex: "browser",
          // width: "20%",
          align: "center",
          scopedSlots: { customRender: "browser" }
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          // width: "20%",
          align: "center",
          scopedSlots: { customRender: "createTime" }
        },
        {
          title: "查询时间",
          dataIndex: "time",
          // width: "20%",
          align: "center",
          scopedSlots: { customRender: "time" }
        },
        {
          title: "操作",
          dataIndex: "action",
          // width: "9%",
          align: "center",
          scopedSlots: { customRender: "action" }
        }
      ],
      dataTable: []
    };
  },
  mounted() {
    this.getList();
  },
  activated() {},
  methods: {
    moment,
    getList(status) {
      if (status === "status") {
        this.pagination.pageNumber = 1;
      }
      this.loading = true;
      API.getlog(this.pagination).then(res => {
        if (res.code === 200) {
          this.dataTable = res.data.content;
          this.totalPage = res.data.total;
        }
        this.loading = false;
      });
    },
    onShowSizeChange(value, pageSize) {
      this.pagination.pageNumber = 1;
      this.pagination.pageSize = pageSize;
      this.getList();
    },
    paginationChange(value) {
      this.pagination.pageNumber = value;
      this.getList();
    },
    initPage() {
      this.pagination.pageNumber = 1;
      this.pagination.pageSize = 10;
      this.pagination.userName = "";
      this.pagination.method = "";
      this.pagination.requestIp = "";
      this.pagination.logType = "INFO";
      this.pagination.createTime = null;
      this.form.resetFields(["dateTime"]);
      this.getList();
    },
    getTimeChange(dates, dateStrings) {
      if (dates.length < 1) {
        this.pagination.createTime = null;
      } else {
        this.pagination.createTime = dateStrings.join(",")
      }
    },
    deleteLog(record) {
      let that = this;
      this.$confirm({
        okText: "确定",
        cancelText: "取消",
        title: "",
        content: "确定进行删除操作？",
        onOk() {
          API.dellog(record.id).then(res => {
            if (res.code === 200) {
              that.$message.destroy();
              that.$message.success("删除成功");
              that.getList();
            }
          });
        },
        onCancel() {}
      });
    }
  }
};
</script>
